<template>
	<view>
		<uni-nav-bar fixed="true" title="修改密码" backgroundColor="#f5f5f5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body">
			<view class="title">请输入提示信息</view>
			<view class="card">
				<input type="password" v-model="oldPassword" placeholder="请输入旧密码..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="newPassword" placeholder="请输入新密码..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="password" v-model="newPassword2" placeholder="请再次输入新密码..." placeholder-class="text" />
			</view>
			<view class="btn" @click="update">
				修改密码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: "",
				newPassword: "",
				newPassword2: ""
			}
		},
		methods: {
			update() {
				if (this.checkNull("旧密码", this.oldPassword)) return;
				if (this.checkNull("新密码", this.newPassword)) return;
				if (this.checkNull("新密码", this.newPassword2)) return;
				if (this.newPassword !== this.newPassword2) {
					uni.showToast({
						icon: "none",
						title: "新密码两次不一致!"
					});
					return;
				}
				this.$request.TokenRequest({
					url: "/user/updatePassword"
				}, {
					oldPassword: this.oldPassword,
					newPassword: this.newPassword
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "密码修改成功!"
						})
						this.newPassword = ""
						this.oldPassword = ""
						this.newPassword2 = ""
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			checkNull(message, str) {
				if (str === "" || str === null || str === undefined) {
					uni.showToast({
						icon: "none",
						title: "请输入" + message
					});
					return true;
				}
				return false;
			},
			back() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 73%;
		margin: 0 auto;
		text-align: center;
	}

	.title {
		margin: 30rpx 0;
		font-size: 40rpx;
	}

	.card {
		background-color: #F5F5F5;
		margin: 70rpx auto;
		padding: 40rpx 55rpx;
		border-radius: 50rpx;

		// width: 70%;
		.text {
			font-size: 35rpx;
		}
	}

	.btn {
		font-size: 37rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		width: 360rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}
</style>
